<template>
	<div>
		<div v-if="loading">数据加载中...</div>
		<div v-else>
			<van-sticky>
				<van-button :type="i === activeIndex ? 'primary' : 'default'" v-for="(v, i) in onlineList" :key="i"
					@click="activeIndex = i">{{
							v.category_name
					}}</van-button>
			</van-sticky>
			<div>
				<van-divider>{{ onlineList[activeIndex].category_name }}</van-divider>
				<template v-for="(item, index) in onlineList[activeIndex].series_list">
					<dl :key="index" v-if="item.type === '1002'">
						<dt>
							<img :src="item.info.image_url" alt="">
						</dt>
						<dd>
							<h2>{{ item.info.series_name }}</h2>
							<div class="flex">
								<span>懂车分:</span>
								<van-rate v-model="item.info.dcd_score.score" :size="25" color="#ffd21e" void-icon="star"
									void-color="#eee" />
							</div>
							<div class="flex">
								<span>指导价:</span>
								<b>{{ item.info.dealer_price }}</b>
							</div>
						</dd>
					</dl>
				</template>
			</div>
		</div>
	</div>
</template>


<script lang="ts" setup>
import { fetchSelectCarDetail } from '@/api';
import { onMounted, ref, defineProps } from 'vue';

const onlineList = ref<any>()
const props = defineProps(['id'])
const loading = ref(true)
const activeIndex = ref(0)

const fetchDetail = async () => {
	try {
		const resp = await fetchSelectCarDetail({ brand_id: props.id })
		console.log(resp.data.data);
		onlineList.value = resp.data.data.online_list
		loading.value = false
	} catch {
		console.log('超时了！！！')
	}
}

onMounted(() => {
	fetchDetail()
})

</script>


<style scoped lang="scss">
dl {
	display: flex;

	dt {
		img {
			height: 100px;
		}
	}

	dd {
		.flex {
			display: flex;
			align-items: center;
		}
	}
}
</style>